angular.module('myApp', ['ngRoute', 'ngAnimate']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
		console.log('app配置开始');
		//使用版本号防止模板页面被缓存而导致莫名其妙的错误
		$routeProvider.when('/index', {
			templateUrl : 'page0.html?v=20160217',
			controller : 'IndexPage0Ctrl'
		}).when('/page1', {
			templateUrl : 'page1.html?v=20160217',
			controller : 'IndexPage1Ctrl'
		}).when('/page2', {
			templateUrl : 'page2.html?v=20160217',
			controller : 'IndexPage2Ctrl'
		}).when('Index/read/:id', {
			templateUrl : 'tpl/index/read.html',
			controller : 'IndexListCtrl'
		}).otherwise({
			redirectTo : '/index'
		});
		
		//路由HTML5配置仅支持高级浏览器，目前市面上的手机基本都能支持,为测试方便，暂时先关闭
        $locationProvider.html5Mode({
        	enabled: false,
  			requireBase: false
        });
        console.log('app配置完成');
}]).run(['$templateCache', function($templateCache){
	//本处只运行一次
	$templateCache.put('content', '<div>这是还各种标签的文本内容，模拟从后台获取的新闻详情数据<br/><a href="http://www.baidu.com">跳转到百度</a></div>');
	console.log('run方法只运行一次');
}]).service('UserService',['$rootScope', function($rootScope){
	//服务提供数据
	var service = {
		users : [
			{
				'name' : '陈峰展',
				'age' : 26
			},{
				'name' : '梁燕萍',
				'age' : 27
			},{
				'name' : '张幼珍',
				'age' : 48
			}
		],
		addUser : function(name, age){
			this.users.push({
				'name' : name,
				'age' : age
			});
			//向下传播自定义事件
			//$emit向上传播
			//$broadcast向下传播
			$rootScope.$broadcast('users.add');
		}
	};
	return service;
}]).filter('trusted', ['$sce', function($sce){
	//创建一个过滤器用于安全输出HTML标签
	return function(text){
    	return $sce.trustAsHtml(text);
	};
}]).directive('loader', function(){
	//指令绑定可复用事件
	return {
		restrict : 'E',
		link : function(scope, element, attrs){	//link函数会自动运行，操作DOM或者绑定事件
			element.bind('click', function(event) {
				scope.$apply(attrs.loadfun);	//注意loadfun只能用小写，建议视图也小写

			});
		}
	};
}).directive('eventAddUser', ['UserService', function(UserService){
	//指令绑定事件
	return {
		restrict : 'A',
		link : function(scope, element, attrs){	//link函数会自动运行，操作DOM或者绑定事件
			element.bind('click', function(event) {
				UserService.addUser('虾米鬼', 31);
			});
		}
	};
}]).directive('content', ['$templateCache', function($templateCache){
	//指令解析特定标签
	return {
		restrict : 'AEMC',	//匹配模式,A属性，E元素，M注释，C样式类,推荐使用EA
		//template : '<div>这是还各种标签的文本内容，模拟从后台获取的新闻详情数据<br/><a href="http://www.baidu.com">跳转到百度</a></div>',
		//template : $templateCache.get('content'),
		templateUrl : 'temp.html?v=20160217'
		//replace : true //本参数已弃用
	};
}]).controller('test01_01Controller',['$scope', 'UserService', function($scope, UserService) {
	$scope.hello = '你好';
	$scope.users = UserService.users;
	//监听事件，更新显示
	$scope.$on('users.add', function(event){
		$scope.users = UserService.users;
		//手动调用轮询触发局部变量的更新
		$scope.$apply();
	});
	$scope.loadData1 = function(){
		console.log('加载数据1-' + (new Date()).valueOf());
	};
}]).controller('test01_02Controller',['$scope', function($scope) {
	$scope.hello = '你好2';
	$scope.users = [
		{
			'name' : '陈峰展2',
			'age' : 262
		},{
			'name' : '梁燕萍2',
			'age' : 272
		},{
			'name' : '张幼珍2',
			'age' : 482
		}
	];
	$scope.loadData2 = function(){
		console.log('加载数据2-' + (new Date()).valueOf());
	};
}]).controller('test01_03Controller',['$scope', function($scope) {
	$scope.test0103 = "本变量只在test01_03Controller有效";
	//也可以定义函数
	$scope.testfun = function(){
		return '这是作用域函数的返回值！';
	};
	//使用本作用域变量
	$scope.testfun02 = function(){
		return '这是本作用域变量：' + $scope.test0103;
	};
	//使用父作用域变量
	$scope.testfun03 = function(){
		return '这是父作用域变量：' + $scope.$parent.hello;
	};
}]).controller('test01_04Controller',['$scope', '$rootScope', '$location', '$sce', function($scope, $rootScope, $location, $sce) {
	//推荐使用单一的对象来对作用域赋值，以避免赋值冲突，且对象内的命名就不会有约束了。
	$scope.test01_04ctrl = {
		name : '本变量只在test01_04Controller有效',
		testfun : function(){
			return '这是作用域函数的返回值！';
		},
		testfun02 : function(){
			return '这是本作用域变量：' + $scope.test01_04ctrl.name;
		},
		testfun03 : function(){
			return '这是父作用域变量：' + $scope.$parent.hello;
		},
		nowurl : "NULL",
		cgurl : function(){

			//不要直接使用window.location
			//window.location.hash = (new Date()).valueOf();
			//window.location.href = 'http://www.baidu.com';
			//$rootScope.$broadcast('location.hash');

			//这个才能触发location事件
			$location.url("/stk/index" + (new Date()).valueOf());
		}
	};
	$scope.$on('$locationChangeStart', function(event, newu, oldu){
		console.log('$locationChangeStart事件发生');
		console.log(event);

		//不建议使用本方法，会抛出unsafe错误
		//$scope.test01_04ctrl.nowurl = $sce.trustAsHtml(oldu + "<br/>|->|<br/>" + newu);
		
		//建议使用本方法，并在页面进行HTML安全输出
		$scope.test01_04ctrl.nowbgnurl = oldu + "<br/>|->|<br/>" + newu;

		//使用本方法可以禁止路由跳转及URL变化
		//event.preventDefault();
	});
	$scope.$on('$locationChangeSuccess', function(event, newu, oldu){
		console.log('$locationChangeSuccess事件发生');
		console.log(event);
		
		//建议使用本方法，并在页面进行HTML安全输出
		$scope.test01_04ctrl.nowendurl = oldu + "<br/>|->|<br/>" + newu;

		//使用本方法可以禁止路由跳转及URL变化
		//event.preventDefault();
	});
	//input双向绑定DEMO
	var MAX_LEN = 4;
	$scope.input = {
		name : '---',	//在视图中使用ng-model进行双向数据绑定
		warn : function(){
			if (this.name.length > MAX_LEN) {
				return true;
			}else{
				return false;
			}
		},
		change : function(){
			if (this.name.length > MAX_LEN) {
				return '你这名字也太长了吧';
			}else if(this.name.length < 2){
				return '这这名字也太短了吧';
			}else{
				return '这名字可以接受';
			}
		},
		valid : function(){
			var warn = this.warn();
			return !warn;
		},
		check : function(){
			if (this.name.length > MAX_LEN) {
				alert('你这名字也太长了吧');
			}else{
				alert('这名字可以接受');
			}
		},
		setval : function(val){
			this.name = val;
		},
		reset : function(){
			this.name = '';
		}
	};
}]).controller('IndexPage0Ctrl',['$scope', function($scope) {

}]).controller('IndexPage1Ctrl',['$scope', function($scope) {

}]).controller('IndexPage2Ctrl',['$scope', function($scope) {

}]);